<template>
  <ul class="media">
    <li v-for="(item, index) in imgs">
      <img :src="item" alt="" />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        "https://img1.baidu.com/it/u=733487445,1364951041&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1672160400&t=a4567c30f619576607311e8291032b9e",
        "https://img0.baidu.com/it/u=1811490819,3845425068&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=350",
        "https://img0.baidu.com/it/u=2167658858,2699389108&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400",
        "",
      ],
    };
  },
};
</script>

<style>
.media {
  border: 1px solid #ccc;
  /* height: 100px; */
  background: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
img {
  width: 150px;
  height: 100px;
  border-radius: 10px;
}
@media all and (max-width: 600px) {
  .media {
    background-color: lightblue;
    /* width: 100vw; */
    
  }
  li {
  }
}
</style>
